<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>所有商品</title>
  <link rel="stylesheet" type="text/css" href="../css/main.css">
  <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
  <script type="text/javascript" src="../layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

	<div class="site-nav-bg">
    <div class="site-nav w1200">
      <ul class="layui-nav" style="text-align: right;" height="50px">
      	<li class="layui-nav-item">
    		<a href="index.html">首页<span class="layui-badge-dot"></span></a>
  		</li>
  		<li class="layui-nav-item">
    		<a href="shopcart.html">购物车<span class="layui-badge">3</span></a>
  		</li>
  		<li class="layui-nav-item">
    	  <a href="#"><img src="../images/me.JPG" class="layui-nav-img">我</a>
    	  <dl class="layui-nav-child">
	      	<dd><a href="javascript:;">修改信息</a></dd>
	      	<dd><a href="javascript:;">退出</a></dd>
    	  </dl>
  		</li>
	  </ul>
    </div>
  </div>
  
  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="index.html" title="">
            "Spend Jack Ma's Money"
          </a>
        </h1>
        <div class="mallSearch">
          <form action="" class="layui-form" novalidate>
            <input type="text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入要查询的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>
  
  <div class="content content-nav-base datails-content">
  	<div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="#" class="active">所有商品</a>
            <a href="information.html">市场资讯</a>
            <a href="about.html">关于我们</a>
          </div>
        </div>
      </div>
    </div>
    
    <div class="fixed-float-money">
		<ul class="layui-nav layui-bg-green" style="text-align: center">
			<li class="layui-nav-item">
		    	<i name="left" id="left" class="layui-icon layui-icon-rmb" style="font-size: 30px; color: gold;">70000000000</i>  
			</li>
		</ul>
    </div>
    <div class="product-intro layui-clear" align="center">
        <div class="preview-wrap">
          <a href="javascript:;"><img src="../images/me.JPG" height="500px"></a>
        </div>
    </div>
  </div>


<script type="text/javascript" src="../js/jquery-1.7.js"></script>
<script>
$(function(){
      //获取要定位元素距离浏览器顶部的距离
      var navH = $(".fixed-float-money").offset().top;
      // console.log(navH);
      //滚动条事件
      $(window).scroll(function(){
          //获取滚动条的滑动距离
          var scroH = $(this).scrollTop();
          // console.log(scroH);
          //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
          if(scroH>=navH){
              $(".fixed-float-money").css({"position":"sticky","top":0});
          }else if(scroH<navH){
              $(".fixed-float-money").css({"position":"static"});
          }
       })
  });
  
</script>

</body>
</html>